package com.step.ems.pages.elevator

import androidx.annotation.StringRes
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.king.ultraswiperefresh.NestedScrollMode
import com.king.ultraswiperefresh.UltraSwipeRefresh
import com.king.ultraswiperefresh.indicator.classic.ClassicRefreshHeader
import com.step.ems.R
import com.step.ems.api.res.ElevatorRes
import com.step.ems.common.RefreshType
import com.step.ems.common.UiState
import com.step.ems.component.EndlessLazyColumn
import com.step.ems.component.MySearchBar
import com.step.ems.component.MyTopBar
import com.step.ems.component.PageShimmer
import com.step.ems.component.PageStatus
import com.step.ems.ui.theme.ContentBg

@Composable
fun ElevatorPageScreen(
    onItemClick: (ElevatorRes) -> Unit,
    viewModel: ElevatorPageViewModel = hiltViewModel(),
) {
    Scaffold(topBar = {
        MyTopBar(stringResource(R.string.elevator))
    }) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .background(color = ContentBg)
        ) {
            Spacer(modifier = Modifier.height(1.dp))
            MySearchBar(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .background(Color.White)
                    .padding(horizontal = 16.dp, vertical = 8.dp),
                value = viewModel.filter,
                onValueChange = { viewModel.filter = it },
                onSearch = { viewModel.getData(RefreshType.Pull) }
            )
            Spacer(modifier = Modifier.height(4.dp))

            val data by viewModel.data.collectAsStateWithLifecycle()
            val uiState by viewModel.uiState.collectAsStateWithLifecycle()
            PageStatus(uiState = uiState, total = data.size, retry = { viewModel.getData(RefreshType.Init) }) {
                ElevatorList(data = data, uiState = uiState, viewModel = viewModel, onItemClick = onItemClick)
            }
        }
    }
}

@Composable
fun ElevatorList(
    data: List<ElevatorRes>,
    uiState: UiState,
    onItemClick: (ElevatorRes) -> Unit,
    viewModel: ElevatorPageViewModel,
) {
    val pullRefreshState = viewModel.pullRefreshState

    if (data.isEmpty()) {
        PageShimmer()
    } else {
        UltraSwipeRefresh(
            state = pullRefreshState,
            loadMoreEnabled = false,
            vibrateEnabled = true,
            onRefresh = {
                viewModel.getData(RefreshType.Pull)
            },
            onLoadMore = {},
            headerScrollMode = NestedScrollMode.Translate,
            headerIndicator = {
                ClassicRefreshHeader(it)
            },
        ) {
            EndlessLazyColumn(
                modifier = Modifier.fillMaxSize(),
                uiState = uiState,
                items = data,
                itemKey = { item -> item.id },
                loadMore = { viewModel.getData(RefreshType.LoadMore) }
            ) { item ->
                ElevatorItem(item, onItemClick)
                Spacer(modifier = Modifier.height(4.dp))
            }
        }
    }
}

@Composable
fun ElevatorItem(
    item: ElevatorRes,
    onItemClick: (ElevatorRes) -> Unit,
) {
    Column(
        modifier = Modifier
            .clickable { onItemClick(item) }
            .fillMaxWidth()
            .background(Color.White)
            .padding(horizontal = 16.dp, vertical = 12.dp)
    ) {
        ElevatorItemLine(R.string.elevatorName, item.name)
        ElevatorItemLine(R.string.regCode, item.registrationCode)
        ElevatorItemLine(R.string.useUnit, item.useUnitName)
        ElevatorItemLine(R.string.brand, item.brandName)
    }
}

@Composable
fun ElevatorItemLine(@StringRes titleResId: Int, value: String?) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(text = stringResource(id = titleResId) + "：", fontSize = 16.sp)
        Text(text = value ?: "-", fontSize = 16.sp)
    }
}